<template>
    <div id="access">
        <div class="title">设备接入</div>
        <div class="content">
            <div class="top">
                <div>
                    <div class="text-title">设备接入率</div>
                    <div class="text-value">{{ (deviceData.checked / (deviceData.checked +
                        deviceData.uncheck) * 100).toFixed(0) + '%' }}</div>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <div>
                        <div class="text-title icon_5">设备总数</div>
                        <div class="text-value">{{ (deviceData.checked +
                            deviceData.uncheck).toFixed(0) }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div>
                    <div>
                        <div class="text-title icon_5">接入：</div>
                        <div class="text-value"> {{ deviceData.checked }}</div>
                    </div>
                </div>
                <div class="line"></div>
                <div>
                    <div>
                        <div class="text-title icon_6">未接入：</div>
                        <div v-if="deviceData.uncheck > 0" style="cursor: pointer" @click="jumpPage">
                            <div class="text-value">{{
                                deviceData.uncheck }}
                                <i class="el-icon-arrow-right"></i>
                            </div>

                        </div>
                        <div class="text-value" v-else>{{ deviceData.uncheck }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
  
<script>
import device from '@/assets/images/device.png';
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
    data() {
        return {
            deviceImg: device,
            data: {}
        }
    },
    props: {
        deviceData: {
            type: Object,
            default: {},
        }
    },

    methods: {
        jumpPage() {
            this.$router.push('devices/device');
        },
    }

}
</script>
  
<style lang='scss' scoped>
@import './css/index.scss';
</style>